<template>
  <div class="blog-admin-container">
    <el-card>
      <div class="blog-admin-container-title">评论管理</div>
      <div class="comments-operation-container">
        <div>
          <el-button
            type="danger"
            size="small"
            :disabled=" selectedData.length === 0"
            icon="el-icon-delete"
            @click="batchDeletionVisible = true"
          >批量删除
          </el-button>
        </div>
        <div class="comments-select-container">
          <el-select v-model="currentCommentType" size="small" placeholder="请选择">
            <el-option
              v-for="audit in commentType"
              :key="audit.value"
              :label="audit.label"
              :value="audit.value"
            />
          </el-select>
          <el-input
            v-model="search"
            prefix-icon="el-icon-search"
            size="small"
            placeholder="输入评论名称搜索"
            clearable
            @clear="clearSearch"
          />
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            :disabled="search.length===0"
            @click="getSearchCurrentData"
          >搜索
          </el-button>
        </div>
      </div>
      <div class="comment-table-container">
        <el-table
          ref="multipleTable"
          :data="commentData"
          border
          style="width: 100%"
          @select="handleSelection"
          @select-all="handleAllSelection"
        >

          <el-table-column
            type="selection"
            width="55"
          />

          <el-table-column
            v-if="currentCommentType === 0"
            align="center"
            prop="article_name"
            label="文章"
          />

          <el-table-column
            align="center"
            prop="name"
            label="名称"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.is_master === 1" type="warning">{{ scope.row.name }}</el-tag>
              <el-tag v-else>{{ scope.row.name }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="reply_name"
            label="回复评论"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.reply_id !== ''"><span
                style="color: #E6A23C;padding-right: 2px;"
              >@</span>{{ scope.row.reply_name }}</span>
              <span v-else>无</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="content"
            label="评论内容"
          />
          <el-table-column
            align="center"
            prop="email"
            label="邮箱地址"
          />
          <el-table-column
            align="center"
            prop="create_time"
            label="创建时间"
          />

          <el-table-column
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button size="small" style="margin-right: 10px" type="success" @click="openCommentsMessage(scope.row.id)">
                回复
              </el-button>
              <el-popconfirm
                title="你确定删除这个留言?"
                icon="el-icon-info"
                icon-color="red"
                @onConfirm="delComments(scope.row.id)"
              >
                <el-button slot="reference" type="danger" size="small">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="comments-paging-container">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageData.pageSize"
          :page-sizes="[5,10,15]"
          :total="pageData.total"
          background
          @size-change="handleCurrentSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog
      title="回复评论"
      :visible.sync="commentsDialog.dialogVisible"
      width="30%"
      @close="closeCommentsMessage"
    >
      <el-input v-model="commentsDialog.commentMessage" type="textarea" :rows="2" placeholder="需要回复些什么呢...." />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCommentsMessage">取 消</el-button>
        <el-button type="primary" @click="replyToComments">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="batchDeletionVisible"
      width="20%"
      center
      @close="batchDeletionVisible = false"
    >
      <h2 style="text-align: center">确定要删除这些评论吗?</h2>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="batchDeletionVisible = false">取 消</el-button>
        <el-button type="danger" @click="batchDeleteComments">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import PagerMixin from '@/components/mixins/PagerMixin'
import { getCommentsApi, delCommentsApi, delListCommentsApi, ReplyCommentsApi } from '@/api/comments'
import { Message } from 'element-ui'

export default {
  name: 'Comments',
  mixins: [PagerMixin],
  data() {
    return {
      batchDeletionVisible: false,
      pageData: {
        pageSize: 10
      },
      commentsDialog: {
        dialogVisible: false,
        comments_id: '',
        commentMessage: ''
      },
      currentCommentType: 0,
      commentType: [
        {
          value: 0,
          label: '文章'
        },
        {
          value: 1,
          label: '友链'
        }],
      selectedData: [],
      commentData: []

    }
  },
  watch: {
    currentCommentType(oldValue, newValue) {
      this.getCurrentData()
    }
  },
  created() {
    this.getCurrentData()
  },
  methods: {
    getCurrentData() {
      const params = this.getPageParams()
      params.comments_type = this.currentCommentType
      getCommentsApi(params).then(resp => {
        this.getPageConfig(resp)
        this.commentData = resp.data.result
      })
    },
    handleSelection(selection, row) { // 表格数据被选中触发
      this.selectedData = selection
    },
    handleAllSelection(selection) { // 表格数据全选触发
      this.selectedData = selection
    },
    openCommentsMessage(comments_id) {
      this.commentsDialog.dialogVisible = true
      this.commentsDialog.comments_id = comments_id
    },
    closeCommentsMessage() {
      this.commentsDialog.dialogVisible = false
      this.commentsDialog.comments_id = ''
      this.commentsDialog.commentMessage = ''
    },
    replyToComments() {
      const params = {
        id: this.commentsDialog.comments_id,
        content: this.commentsDialog.commentMessage
      }

      ReplyCommentsApi(params).then(resp => {
        Message({
          message: '回复成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.closeCommentsMessage()
        this.getCurrentData()
      }).catch(error => {
        console.log(error)
        Message({
          message: '回复失败:',
          type: 'error',
          duration: 5 * 1000
        })
        this.closeCommentsMessage()
      })
    },
    // 删除评论
    delComments(comments_id) {
      delCommentsApi({ id: comments_id }).then(resp => {
        Message({
          message: '删除评论成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.getCurrentData()
      })
    },
    // 批量删除批量
    batchDeleteComments() {
      const ids = this.selectedData.map(item => { return item.id })
      delListCommentsApi({ ids: ids }).then(resp => {
        Message({
          message: '批量删除评论成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.batchDeletionVisible = false
        this.selectedData = []
        this.getCurrentData()
      }).catch(error => {
        console.log(error)
        this.batchDeletionVisible = false
      })
    }
  }
}
</script>

<style scoped>

</style>

<style lang="less">
  .comments-operation-container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .comments-select-container {
      display: flex;
      margin-left: 20px;

      & div {
        margin-right: 20px;
      }

    }
  }

  .comment-table-container {
    margin: 20px 0;
  }

  .comments-paging-container {

    padding-bottom: 30px;

    & > div:first-child {
      float: right;
    }
  }
</style>
